<template>
  <div class="like-container">
    <div class="home-panel">
      <div class="header">
        <h4 data-v-bcb266e0="">我的收货地址</h4>
        <el-button type="primary" size="default" @click="showFlag = true" text>添加地址</el-button>
      </div>
      <div class="address_list">
        <table class="border">
          <thead>
            <tr>
              <th class="border">收货人</th>
            
              <th class="border">电话/手机</th>
            
              <th class="border">所在地区</th>
            
              <th class="border">详细地址</th>
          
              <th class="border">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(i,index) in address_list" :key="index">
              <td class="border">
                {{ i.receiver}}
              </td>
              <td class="border">
                {{ i.phone}}
              </td>
              <td class="border">
                {{ i.province}} {{ i.city }} {{ i.district}}
              </td>
              <td class="border">
                {{ i.detailed_address}}
              </td>
              <td class="border">
                <el-button type="primary" size="default" @click="deleteAddress(i.id)" text>删除</el-button>
              </td>
            </tr>
          </tbody>
        </table>

      </div>
    </div>
  </div>
    <!-- 添加地址 -->
    <el-dialog v-model="showFlag" title="添加收货地址" width="30%" center>
    <div class="addressWrapper">
      <el-form ref="formRef" :rules="rules" :model="form" label-position="right" label-width="80px" status-icon>
        <el-form-item  label="收货人" prop="receiver">
          <el-input v-model="form.receiver" placeholder="收货人" style="width: 200px;" />
        </el-form-item>
        <el-form-item  label="联系方式" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号码" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="所在地区" prop="province">
          <el-form ref="formRef" :model="formAddress">
            <div class="clearfix select_box">
              <el-select class="select_address" v-model="formAddress.province" placeholder="省份">
                <el-option v-for="(i,index) in provinceList" :key="index" :label="i.province" :value="i" @click="getAddressCity()" />
              </el-select>
              <el-select class="select_address" v-model="formAddress.city" placeholder="城市">
                <el-option v-for="(i,index) in cityList" :key="index" :label="i.province" :value="i" @click="getAddressDistrict()" />
              </el-select>
              <el-select class="select_address" v-model="formAddress.distinct" placeholder="地区">
                <el-option v-for="(i,index) in distinctList" :key="index" :label="i.distinct" :value="i.district" @click="getAddressDistricnt(i.id)"/>
              </el-select>
            </div>
          </el-form>
        </el-form-item>
        <el-form-item  label="详细地址" prop="detailed_address">
          <el-input v-model="form.detailed_address" placeholder="请输入详细地址" style="width: 300px;" />
        </el-form-item>
        <el-form-item  label="身份证" prop="ID_number">
          <el-input v-model="form.ID_number" placeholder="请输入身份证" style="width: 200px;" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="onSubmit">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted,ref,reactive } from 'vue'
import { getAddressAPI,addAddressAPI,getAddressCityAPI,getAddressDistinctAPI,deleteAddressAPI,getAddressListAPI } from '@/apis/checkout'
import { useRouter } from 'vue-router'

const router = useRouter()
const address_list = ref([])
const getAddressList = ()=>{
  getAddressListAPI()
  .then(res=>{
    console.log(res);
    address_list.value = res
  })
}
onMounted(()=>getAddressList())


//新增地址
const showFlag = ref(false)
const formAddress = reactive({
  province:'',
  city:"",
  distinct:''
})
const disId = ref(null)
const provinceList = ref([])
const getAddress = async()=>{
  const res = await getAddressAPI()
  provinceList.value = res
}
onMounted(()=>getAddress()) 
const cityList = ref([])
const getAddressCity = async()=>{
  const res2 = await getAddressCityAPI(formAddress)
  cityList.value = res2
}
const distinctList = ref([])
const getAddressDistrict = async()=>{
  const res3 = await getAddressDistinctAPI(formAddress)
  distinctList.value = res3
}
const getAddressDistricnt = (id)=>{
  disId.value = id
}
const form = reactive({
  receiver: '',
  phone: '',
  district_id: disId,
  detailed_address:'',
  ID_number:"",
  is_default:0,
})
const rules = {
  receiver : [  //验证规则
    { required: true, message: '用户名不能为空', trigger: 'blur' },
  ],
}

const onSubmit = ()=>{
  addAddressAPI(form)
  .then(res=>{
    console.log(res);
    showFlag.value = false
    location.reload()
  }) 
}

//删除地址
const deleteAddress = async(id)=>{
  await deleteAddressAPI(id)
  location.reload()
  
}

</script>

<style lang='scss'>
.like-container {
  margin-top: 20px;
  border-radius: 4px;
  background-color: #fff;
}

.home-panel {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 20px;
  padding-bottom: 40px;

  .header {
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    h4 {
      font-size: 22px;
      font-weight: 400;
    }
    
  }
  .address_list{
    table {
      
      width: 100%;
      th {
        font-size: 14px;
        padding: 5px 0;
        text-align: center;
        background: rgb(243, 246, 248);
      }
      td {
        padding: 5px 0;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
.addressWrapper {
  max-height: 500px;
  overflow-y: auto;
}
.select_box {
  display: flex;
  .select_address {
    width: 100px;
    margin-right:  5px;;
  }
}
</style>